<template>
    <div class="orderlist">
        <van-sticky>
            <van-tabs v-model="active" @change='changeTabs'>
                <van-tab name="3" title="审核中"></van-tab>
                <van-tab name="1" title="已通过"></van-tab>
                <van-tab name="4" title="已发货"></van-tab>
                <van-tab name="2" title="未通过"></van-tab>
                <van-tab name="5" title="已完成"></van-tab>
            </van-tabs>
        </van-sticky>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="content">
                <van-skeleton title :row="3" :loading="loading">
                    <div class="list" v-if="datalist.length>0">
                        <div class="item" v-for="item of datalist" :key="item.order_code">
                            <van-card 
                                :price="item.pice" 
                                :title="item.order_code" 
                                :desc="item.name" 
                                :thumb="item.url" 
                                :num="item.out_num"
                                @click="goodsClick(item.order,item.mout_id,item.id)"
                            >
                                <template #tags>
                                    <van-tag plain type="danger" v-if="item.out_status == 3">审核中</van-tag>
                                    <van-tag plain type="danger" v-if="item.out_status == 1">已通过</van-tag>
                                    <van-tag plain type="danger" v-if="item.out_status == 4">未通过</van-tag>
                                    <van-tag plain type="danger" v-if="item.out_status == 2">已发货</van-tag>
                                </template>
                                <template #footer>
                                    <div class="btn" @click.stop="">
                                        合计：￥{{ item.pice * item.out_num }}
                                    </div>
                                </template>
                            </van-card>
                        </div>
                    </div>
                    <van-empty description="暂无商品" v-else>
                        <van-button round type="danger" class="bottom-button" @click="goBuy">
                            去购买
                        </van-button>
                    </van-empty>
                </van-skeleton>
            </div>
        </van-pull-refresh>
        
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            datalist: [],
            active:0,
            isLoading:false,
            loading:true
        }
    },
    computed: {
        ...mapState(['openid']),
        orderState() {
            let obj = {}
            switch (this.active){
            case '3':
                obj.out_status = 3
                break
            case '1':
                obj.out_status = 1
                break
            case '2':
                obj.out_status = 2
                break
            case '4':
                obj.out_status = 4
                break
            case '5':
                obj.out_status = 5
            }
            return obj
        }
    },
    mounted(){
        this.active = this.$route.params.id
        this.getList()
    },
    methods:{
        //去购买
        goBuy(){
            this.$router.push('/')
        },
        //进入商品详情
        goodsClick(order,mout_id,id){
            this.$router.push({ path: `/center/returnGoodsList/returnGoodsDetail/${order}/${mout_id}/${id}` })
        },
        //切换tabs
        changeTabs(name,title){
            console.log(name,title)
            this.getList()
        },
        //下拉刷新
        onRefresh(){
            this.getList()
            this.isLoading = false
        },
        //获取列表
        async getList() {
            let form={
                openid: this.openid,
                ...this.orderState
            }
            this.loading = true
            let { data: { code, data } } = await this.$http.get(this.$api.merchantRetreat,form)
            this.loading = false
            if (code === 0) {
                this.datalist = data.items
            }else{
                this.datalist = []
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .orderlist{
        .content{
            min-height: calc(100vh - 44px);
            .van-skeleton__title{
                margin-top: 2rem;
            }
            .van-skeleton__row, .van-skeleton__title{
                background-color: #fff;
            }
        }
    }
</style>